<template>
  <div class="layout">
    <div class="helpCaseDetail">
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
      </div>
      <div class="title">劳务帮扶原因</div>
      <div class="tableDiv">
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">公司名称</div>
            <div class="valueDiv">{{ helpCase.companyName }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">劳务帮扶名称</div>
            <div class="valueDiv">{{ helpCase.name }}</div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 100%; display: flex; justify-content: left">
            <div class="keyDiv">劳务帮扶申请原因</div>
            <div class="valueDiv" style="width: 848px">
              {{ helpCase.reason }}
            </div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 100%; display: flex; justify-content: left">
            <div class="keyDiv">劳务帮扶时间期限</div>
            <div class="valueDiv" style="width: 848px">
              {{ helpCase.beginDate + " 至 " + helpCase.endDate }}
            </div>
          </div>
        </div>
      </div>
      <div class="title">招工帮扶需求</div>
      <div class="tableDiv">
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">招聘岗位</div>
            <div class="valueDiv">{{ helpCase.post }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">招聘人数</div>
            <div class="valueDiv">{{ helpCase.amount + "人" }}</div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">招工完成状态</div>
            <div class="valueDiv statusText">
              {{ helpCase.status == 4 ? "已招满" : "" }}
            </div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">完成时间</div>
            <div class="valueDiv">{{ helpCase.finishDate }}</div>
          </div>
        </div>
      </div>

      <div class="btn-bottom">
        <Buttons @goBack="goBack()" :buttons="buttons"></Buttons>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/breadcrumb";

import config from "@/utils/config.js";
import { request } from "../../utils/request";

export default {
  name: "helpCaseDetail",
  meta: {
    name: "帮扶成功案例详情页",
  },
  components: { Breadcrumb },
  data() {
    return {
      buttons:[{text:"返回",type:"normal",size:"l",method:"goBack"}],
      crumbs: [
        {
          label: "门户首页",
          value: "index",
        },
        {
          label: "企业帮扶",
          value: "help",
        },
        {
          label: "帮扶成功案例",
          value: "helpCaseList",
        },
        {
          label: "帮扶成功案例详情",
          value: "helpCaseDetail",
          choose: true,
        },
      ],
      helpCase: {
        companyName: "一家大文化有限公司",
        name: "关于公司技术岗位严重匮乏",
        reason:
          "公司正处于高速发展之际，由于相关重要岗位人才缺失，尤其是本公司技术岗位严重匮乏。公司也通过相关渠道进行招聘，还是不能满足现在的缺口，特请有关部门给予支持。",
        beginDate: "2021-05-09",
        endDate: "2021-06-09",
        post: "机床技术员",
        amount: 10,
        status: "已招满",
        finishDate: "2021-05-23",
      },
    };
  },
  mounted() {
    this.getHelpCaseDetail();
  },
  // activated(){
  // 	this.getHelpCaseDetail();
  // },
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.back();
      // this.$router.push({ path: 'helpCaseList' });
    },
    // 获取帮扶案例详情
    async getHelpCaseDetail() {
      const { code, data, msg } = await request(
        this,
        config.api.supportCaseDetail + this.$route.query.id
      );
      if (code != "200") return this.$message.warning(msg);
      this.helpCase = data;
    },
  },
};
</script>

<style scoped>
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}
.btn-bottom {
  text-align: center;
  margin: 40px 0 150px;
}
.btn-bottom .cancelBtn {
  display: inline-block;
  font-size: 14px;
  background-color: #f1f2f4;
  color: #0053bc;
  padding: 10px 46px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
}
.btn-bottom .cancelBtn:hover {
  cursor: pointer;
  background-color: #0053bc;
  color: #f1f2f4;
  box-shadow: 0px 0px 5px #eeeeee;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.helpCaseDetail {
  width: 1000px;
  margin: 0 auto;
}

.helpCaseDetail .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.helpCaseDetail .backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.helpCaseDetail .title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #045db9;
  border-bottom: 2px solid #045db9;
  padding: 10px 10px 10px 0;
  margin: 30px 0 18px 0;
}

.helpCaseDetail .tableDiv {
  border: 1px solid #eeeeee;
  color: #666666;
}

.helpCaseDetail .tableDiv .rowDiv {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  font-size: 13px;
}

.helpCaseDetail .tableDiv .rowDiv .keyDiv {
  text-align: left;
  background-color: #f4f4f4;
  padding: 10px;
  width: 110px;
}

.helpCaseDetail .tableDiv .rowDiv .valueDiv {
  text-align: left;
  padding: 10px;
  width: 349px;
}

.helpCaseDetail .tableDiv .rowDiv .statusText {
  color: #10a217;
}
</style>
